<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        form {
            margin-bottom: 20px;
        }
        input, textarea {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            box-sizing: border-box;
            position: relative;
        }
        button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            position: relative;
        }
        button:hover {
            background-color: #0056b3;
        }
        .message {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
            position: relative;
        }
        .delete-button {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            background-color: #ff4d4d;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        .delete-button:hover {
            background-color: #ff1a1a;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>留言系统</h1>
        <form id="messageForm">
            <input type="text" id="nickname" placeholder="请输入昵称" required>
            <textarea id="message" placeholder="请输入留言" required></textarea>
            <button type="submit">提交</button>
        </form>
        <div id="messagesContainer"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const messageForm = document.getElementById('messageForm');
            const nicknameInput = document.getElementById('nickname');
            const messageInput = document.getElementById('message');
            const messagesContainer = document.getElementById('messagesContainer');

            // 加载已有的留言
            function loadMessages() {
                let messages = JSON.parse(localStorage.getItem('messages')) || [];
                messagesContainer.innerHTML = '';
                messages.forEach(message => displayMessage(message));
            }

            // 显示一条留言
            function displayMessage(message) {
                const messageDiv = document.createElement('div');
                messageDiv.className = 'message';
                messageDiv.innerHTML = `
                    <p>${message.nickname}:${message.message}</p>
                    <button class="delete-button" data-id="${message.id}">删除</button>
                `;
                messagesContainer.appendChild(messageDiv);

                // 绑定删除按钮的点击事件
                messageDiv.querySelector('.delete-button').addEventListener('click', function () {
                    deleteMessage(message.id);
                });
            }

            // 删除一条留言
            function deleteMessage(id) {
                let messages = JSON.parse(localStorage.getItem('messages')) || [];
                messages = messages.filter(message => message.id !== id);
                localStorage.setItem('messages', JSON.stringify(messages));
                loadMessages();
            }

            // 提交表单时的处理
            messageForm.addEventListener('submit', function (e) {
                e.preventDefault();

                const nickname = nicknameInput.value.trim(); // trim()方法去除两端空格
                const messageText = messageInput.value.trim();

                if (nickname && messageText) {
                    const message = {
                        id: Date.now(),
                        nickname: nickname,
                        message: messageText
                    };

                    // 将留言对象添加到localStorage
                    let messages = JSON.parse(localStorage.getItem('messages')) || []; 
                    messages.push(message);
                    localStorage.setItem('messages', JSON.stringify(messages));

                    // 重置表单
                    nicknameInput.value = '';
                    messageInput.value = '';

                    // 重新加载留言
                    loadMessages();
                } else {
                    alert('昵称和留言不能为空！');
                }
            });

            // 初始化加载留言
            loadMessages();
        });
    </script>
</body>
</html>